<template>
    <div class="login">
        <div class="bgp"></div>
        <div class="login_slogan">
            <img src="../assets//tjise_slogan.png" alt="">
        </div>
        <div class="login_container">

            <img src="../assets/tjise.png" class="img-responsive" alt="Image">

            <!-- <h1 class="title">学校管理系统</h1> -->
            <!-- 表单  绑定对象、绑定验证规则、监听回车键 -->
            <el-form class="login_form" ref="ref_form" :model="userInfo" :rules="rules" @key.enter="onLogin">
                <el-form-item prop="username">
                    <el-input placeholder="请输入用户名" v-model.trim="userInfo.username">
                        <template #prepend>
                            <el-icon>
                                <avatar />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" show-password v-model.trim="userInfo.password">
                        <template #prepend>
                            <el-icon>
                                <key />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-button type="primary" class="login_submit" @click="onLogin">登录</el-button>
                <div class="login_register" @click="OnRegister"><span>去注册</span></div>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue'
import route from '../routers/index'
// 引入登录接口
import { getLogin } from '../api/index'
// 声明数据对象
const userInfo = reactive({
    username: '',
    password: ''
})
// 初始化ref
const ref_form = ref(null)
// 表单验证规则
const rules = {
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
}
// 登录方法
const onLogin = () => {
    console.log(userInfo)
    // 表单验证 
    ref_form.value.validate((val) => {
        // val 用户名和密码的验证结果，为 true 时，说明都不为空，验证通过,为 false 时，验证不通过
        if (val) {
            // 执行登录提交
            getLoginData()
        }
    })
}
// 登录提交操作
const getLoginData = async () => {
    // 调用登录接口  后续写
    const getLoginData = await getLogin({
        name: userInfo.username,
        pwd: userInfo.password
    })
    console.log("登录响应数据：")
    console.log(getLoginData)
    // 判断是否登录成功
    if (getLoginData?.token) {
        // 登录成功,将token值保存到浏览器的缓存中
        localStorage.setItem('token', getLoginData?.token)
        ElMessage({
            message: '登录成功',
            type: 'success',
        })
        // 跳转到首页
        route.push('/home')
    }
}
const OnRegister = () => {
    // 跳转到注册页
    route.push('/register')
}

</script>
<style lang="less" scoped>
.login {
    height: 100%;

    .bgp {
        height: 100%;
        background-image: url("../assets/login_bg.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 50% 50%;
    }

    .login_slogan {
        position: absolute;
        top: 30%;
        left: 25%;
        transform: translate(-50%, -50%);

        .img-responsive {
            width: 100%;
        }
    }

    .login_container {
        position: absolute;
        width: 400px;
        top: 30%;
        left: 70%;
        transform: translate(-50%, -50%);
        background-color: rgba(125, 125, 125, 0.5);
        border-radius: 10px;
        padding: 30px;
        text-align: center;

        .tjise {
            height: 100%;
            margin-bottom: 20px;
        }

        .login_form {
            padding-top: 20px;
            width: 314px;
            text-align: center;
            margin: 0 auto;

            .login_submit {
                width: 100%;
                height: 50px;
                font-size: 16px;
                background-color: #273896;
                // border-radius: 20px;
                margin-bottom: 10px;
            }
        }

        .login_register {
            span {
                font-size: 12px;
                margin: 5px 0;
                color: #fff;
            }
        }

    }

}
</style>